<template>
  <div class="container">
    <el-dialog
      title="题目预览"
      :visible="showDialog"
      class="dialog-body"
      width="900px"
      @close="btnCancle"
    >
      <el-row class="row-body">
        <el-col :span="6">【题型】: {{ data.questionType | ft }} </el-col>
        <el-col :span="6">【编号】: {{ data.id }}</el-col>
        <el-col :span="6">【难度】: {{ data.difficulty | fd }}</el-col>
        <el-col :span="6">【标签】: {{ data.tags }}</el-col>
        <el-col :span="6">【学科】: {{ data.subjectName }} </el-col>
        <el-col :span="6">【目录】: {{ data.directoryName }} </el-col>
        <el-col :span="6">【方向】: {{ data.direction }}</el-col>
      </el-row>
      <hr />
      <el-row>
        <el-col :span="6">【题干】:</el-col>
      </el-row>
      <el-row>
        <div v-html="data.question" style="color: blue"></div>
        <p>选项：（以下选中的选项为正确答案）</p>
        <el-radio
          v-for="item in data.options"
          :key="item.id"
          :label="item.isRight"
          style="display: block"
          v-model="flag"
          @input="doThis"
        >
          {{ item.title }}
        </el-radio>
      </el-row>
      <hr />
      <el-row class="row-body">
        <el-col :span="12">
          【参考答案】:
          <el-button type="danger" size="small" @click="isVideo = !isVideo">
            视频答案预览
          </el-button>
          <video
            :src="data.videoURL"
            width="400"
            height="300"
            controls
            v-if="isVideo"
          ></video>
        </el-col>
      </el-row>
      <hr />
      <el-row class="row-body">
        <el-col :span="24">
          【答案解析】:
          <div v-html="data.answer" style="display: inline-block"></div>
        </el-col>
      </el-row>
      <hr />
      <el-row class="row-body">
        <el-col :span="12">【题目备注】: {{ data.remarks }}</el-col>
      </el-row>
      <el-row slot="footer" type="flex" justify="end">
        <el-button type="primary" @click="btnCancle">关闭</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { detail } from "@/api/hmmm/questions"
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      data: {},
      flag: 1,
      isVideo: false,
    }
  },

  methods: {
    // 获取详情
    async getDetail(id) {
      const { data } = await detail(id)
      this.data = data
      // this.$emit("update:showDialog", false)
      console.log(data)
    },
    // 通知父组件关闭弹窗
    btnCancle() {
      this.$emit("update:showDialog", false)
      this.isVideo = false
    },
    doThis() {
      this.flag = 1
    },
  },
  // 过滤器处理枚举数据
  filters: {
    // 处理题型
    ft(value) {
      if (value === 1) {
        return "单选题"
      } else if (value === 2) {
        return "多选题"
      } else {
        return "简答题"
      }
    },
    // 处理难度
    fd(value) {
      if (value === 1) {
        return "简单"
      } else if (value === 2) {
        return "一般"
      } else {
        return "困难"
      }
    },
  },
}
</script>

<style scoped lang="less">
.dialog-body {
  padding: 30px 20px;
  font-size: 14px;

  .row-body {
    padding: 10px 0;
  }
}
</style>
